{% extends '../base.html' %}
{% block css %}
<style>
#main-con > div:first-child{
  width: 1360px;
}
.report-input > textarea {
  width: 100%;
  padding: 20px;
}
.upload-div > input {
  display: none;
}
.upload-div > span {
  display: inline-block;
  width: 265px;
  height: 150px;
  border: 1px dashed #eeeeee;
  color: #ff9900;
  font-size: 20px;
  border-radius: 20px;
  text-align: center;
  line-height: 150px;
  cursor: pointer;
}
.preview-img {
  display: inline-block;
  position: relative;
  margin-top: 20px;
  margin-left: 20px;
}
.preview-img > span{
  position: absolute;
  right: -5px;
  top: -5px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 20px;
  cursor: pointer;
  border: 1px solid #000000;
  text-align: center;
}
#submit-div{
    margin-top: 20px;
    padding-left: 40%;
  }

</style>
{% endblock css %}

{% block content %}
  <div id="experiment-head">
    <span>实验 > 实验详情 > 提交实验报告 | {{experiment.experiment_name}}</span>
  </div>
  <div id="main-con">
    {% include '../components/exam-con-head.html' with head_title="实验报告名称" %}
    <div class="report-input">
      <textarea id="report-title" rows="3"></textarea>
    </div>
    {% include '../components/exam-con-head.html' with head_title="实验报告" %}
    <div class="report-input">
      <textarea id="report-con" rows="30"></textarea>
    </div>
    {% include '../components/exam-con-head.html' with head_title="报告附件" %}
    <div class="upload-div">
      <input type="file" accept="*/*" onchange="uploadAttach(event, 1)" />
      <span onclick="letUpload(this)" class="upload-attach"> + 上传文件 </span>
      <div id="attach-files"></div>
    </div>
    {% include '../components/exam-con-head.html' with head_title="实验截图" %}
    <div class="upload-div">
      <input type="file" accept="image/*" onchange="uploadAttach(event, 2)" />
      <span onclick="letUpload(this)" class="upload-attach"> + 上传文件 </span>
      <div id="img-files"></div>
    </div>
    {% include '../components/exam-con-head.html' with head_title="实验录屏" %}
    <div class="upload-div">
      <input type="file" accept="video/*" onchange="uploadAttach(event, 3)" />
      <span onclick="letUpload(this)" class="upload-attach"> + 上传文件 </span>
      <div id="video-files"></div>
    </div>
    <div id="submit-div">
      <span onclick="onSubmit()" class="btn-long">提交报告</span>
    </div>
  </div>
{% endblock content %}

{% block script %}
<script src="/static/study/layui/layui.js" charset="utf-8"></script>
<script src="/static/js/tools.js"></script>
<script>
  var loading = false
  var attaches = []
  var imgs = []
  var videos = []
  var layer
  layui.use('layer', function(){
    layer = layui.layer;
  });              
  function letUpload(node) {
    node.previousElementSibling.click()
  }
  function renderAttaches() {
    var res = ""
    for(var i=0;  i < attaches.length; i++){
      res += `<p>${attaches[i].attach_url} <span style="cursor:pointer;" onclick="delAttach(${i})">删除</span></p>`
    }
    document.getElementById('attach-files').innerHTML = res
  }
  function renderImgs() {
    var res = ""
    for(var i=0;  i < imgs.length; i++){
      res += `<span class="preview-img"><img src="${imgs[i].attach_url}" width=265 height=150 />  <span onclick="delImg(${i})">X</span></span>`
    }
    document.getElementById('img-files').innerHTML = res
  }
  function renderVideos() {
    var res = ""
    for(var i=0;  i < videos.length; i++){
      res += `<span class="preview-img"><video src="${videos[i].attach_url}" width=265 height = 150 />  <span onclick="delVideo(${i})">X</span></span>`
    }
    document.getElementById('video-files').innerHTML = res
  }
  function delAttach(i){
    attaches = attaches.filter(function(v, j) {j != i})
    renderAttaches()
  }
  function delImg(i){
    imgs = imgs.filter(function(v, j) {j != i})
    renderImgs()
  }
  function delVideo(i){
    videos = videos.filter(function(v, j) {j != i})
    renderVideos()
  }
  function uploadAttach(e, type) {
    var file = e.target.files[0]
    var form = new FormData();
    form.append('location', file);
    upload(form, '/api/object/richtext/image/upload/', function(res) {
      console.log('sucess', res)
      switch(type) {
        case 1:
          // attach
          attaches.push(res.data)
          renderAttaches()
          break;
        case 2:
          // img
          imgs.push(res.data)
          renderImgs()
          break;
        case 3:
          // video
          videos.push(res.data)
          renderVideos()
          break;
      }
    }, function(err) {
      console.log('error', err)
    }, function (progress) {
      console.log('progress', progress)
    })
  }

  function onSubmit() {
    var d = {}
    d.imgs = imgs
    d.videos = videos
    d.attaches = attaches
    d.experiment_id = {{experiment.id}}
    d.title = document.getElementById('report-title').value
    d.content = document.getElementById('report-con').value
    if (!d.title || !d.content) {
      return layer.msg("实验报告名称与内容不可为空")
    }
    layer.confirm('确定提交报告？', function(index){
      models.experimentModel.createReport(d, res => {
        layer.close(index);
        layer.msg(res.message)
        location.href = "{% url 'study:userExperiment' %}"
      }, err => {
        console.log(err)
        layer.close(index);
        layer.msg(err.message)
      })
    });
  }
    
</script>
{% endblock script %}
  